<template>
	<view class="table-container">
		<view class="section-card">
			<view class="table-header">
				<view class="th project">项目</view>
				<view class="th">结果</view>
				<view class="th">单位</view>
				<view class="th">参考区间</view>
			</view>
			<view class="table-row" v-for="(item, idx) in reportItems" :key="idx">
				<view class="td project">
					<view>{{ item.name }}</view>
					<view v-if="item.subName" class="sub-name">{{ item.subName }}</view>
				</view>
				<view class="td">{{ item.result }}</view>
				<view class="td">{{ item.unit }}</view>
				<view class="td">{{ item.reference }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import infoCard from './infoCard.vue'
	import {
		medicalTechnologyReportTestResult
	} from '../../../../../api/medicalTechnologyReport';
	export default {
		components: {
			infoCard
		},
		props: {
			repotDetail: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				reportItems: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.reportItems = this.repotDetail.examProject
				// medicalTechnologyReportTestResult({
				// 	queryValue: this.repotDetail.applyBillNo
				// }).then(res => {
				// 	console.log(res)

				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.section-card {
		border-radius: 16rpx;
		background: #fff;
		padding: 0 0 12rpx 0;
		box-shadow: 2rpx 4rpx 12rpx rgba(65, 207, 230, 0.08);
	}

	.table-header {
		display: flex;
		background: #e0f3ff;
		border-radius: 16rpx 16rpx 0 0;
		color: #666;
		font-size: 28rpx;
		padding: 30rpx 10rpx;
	}

	.th {
		text-align: center;

		&.project {
			flex: 2;
			text-align: left;
			padding-left: 20rpx;
		}

		&:not(.project) {
			flex: 1;
		}
	}

	.table-row {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		font-size: 28rpx;
		color: #666;
		padding: 18rpx 0;
		margin: 14rpx 0;

		&:last-child {
			border-bottom: none;
		}
	}

	.td {
		text-align: center;

		&.project {
			flex: 2;
			text-align: left;
			padding-left: 20rpx;
		}

		&:not(.project) {
			flex: 1;
		}
	}

	.sub-name {
		font-size: 22rpx;
		color: #888;
		margin-top: 2rpx;
	}
</style>